<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <button>传统注册事件</button>
    <button>方法监听注册方式</button>
    <button>ie9 attachEvent</button>

    <div>1</div>
    <div>2</div>
    <div>3</div>

    <ul>
        <li>这是啥</li>
        <li>这又是啥</li>
        <li>这是什么</li>
        <li>是事件</li>
        <li>是委托</li>
        <li>是事件委托</li>
        <li>哎</li>
    </ul>

    <script>
        // 注册事件
        var btns = document.querySelectorAll('button');
        // 1. 传统方式注册事件
        // 具有唯一性  可以覆盖  
        btns[0].onclick = function() {
            alert('hi');
        }
        btns[0].onclick = function() {
            alert('hi111'); 
        }

        // 2. 方法监听注册事件  addEventListener 
        // （1）里面的事件类型是字符串  必定加引号 而且不带on
        // （2）同一个元素  同一个事件可以添加多个监听事件（事件处理程序）
        btns[1].addEventListener('click', function(){
            alert('azhe');
        })
        btns[1].addEventListener('click', function(){
            alert('不知道');
        })

        // 3. attachEvent  ie9 以前的版本支持
        btns[2].attachEvent('click', function() {
            alert(11);
        });


        // 删除事件
        // 1. 传统方式
        var divs = document.querySelectorAll('div');
        divs[0].onclick = function() {
            alert(11);
            // 1. 传统方式删除事件
            divs[0].onclick = null;
        }
        // 2. removeEventListener 删除事件
        divs[1].addEventListener('click', fn);

        function fn() {
            alert(22);
            divs[1].removeEventListener('click', fn);
        }

        // 3. attachEvent
        divs[2].attachEvent('onclick', fn1);

        function fn1() {
            alert(33);
            // divs[1].removeEventListener('click', fn1);
        }
        
        // 事件委托
        // 事件委托的核心：给父节点添加侦听器，利用事件冒泡影响每一个子节点
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
            alert('事件委托');
            // e.target  这个可以获取我们点击的对象
            e.target.style.backgroundColor = 'pink';
        })
    </script>
</body>
</html>